<template>
    <form-field class="ph-field-multilines" :dirty="dirty" @valid="onValid">
        <form-checkbox 
        :value="value" 
        :disabled="disabled" 
        @change="onChange"><slot></slot></form-checkbox>
    </form-field>
</template>
<script lang="ts">
import { defineComponent, Ref, ref } from 'vue'
import FormField from './field.vue'
import FormCheckbox from './checkbox/group.vue'
export default defineComponent({
    components:{FormField,FormCheckbox},
    props:{
        disabled:{type:Boolean,default:false},
        value:{
            type:[String,Number,Array]
        }
    },
    setup(props,{emit}) {
        const dirty = ref(props.value)
        const onChange = (v:Array<string|number>)=>{
            dirty.value = v
        }
        const onValid = (e:{valid:boolean,tip:string,v:unknown})=>{
            if(e.valid)
            emit("ph-change",e.v)
        }
        return {
            onValid,
            onChange,
            dirty
        }
    },
})
</script>